<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<body>

    <form action="/pcs/settlement/settled" class="layui-card layui-form" data-auto="true" method="post" data-table-id="SettlementTable">

        <input type="hidden" name="id" th:if="${patientAdmission}" th:value="${patientAdmission.id}"/>

        <div class="layui-card-body padding-15" style="overflow: hidden;">
            <div class="layui-col-xs5">
                <div>
                    <h2>岳西县医院</h2>
                    <p th:if="${patientAdmission?.admissionStatus == 1}">住院时间：[[${patientAdmission?.admissionTime}]]~[[${patientAdmission?.dischargeTime}]]</p>
                    <p th:if="${patientAdmission?.admissionStatus == 2}">住院时间：[[${patientAdmission?.admissionTime}]]~[[${patientAdmission?.dischargeTime}]]</p>

                    <p>账单号：[[${patientAdmission?.orderNo}]]</p>
                </div>
                <div class="order-list">
                    <div class="layui-card" th:each="item :${orders}" style="box-shadow: 0px 1px 3px 2px rgba(0, 0, 0, .1);margin-top: 10px">
                        <input type="hidden" th:value="${item.id}" name="orderIds[]">
                        <div class="layui-card-header">[[${item.createTimeStr}]]</div>
                        <div class="layui-card-body">
                            <p><span class="layui-badge layui-bg-green">陪护</span>[[${item.projectTitle}]]</p>
                            <p>订单编号：[[${item.sn}]]</p>
                            <p>订单金额：￥[[${item.total}]]</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label ">预缴金额</label>
                    <div class="layui-input-block ">
                        <input type="text" id="increase_input"  readonly name="increase"  th:value="${increase}"  class="layui-input layui-bg-gray">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">结算金额</label>
                    <div class="layui-input-block ">
                        <input type="text"  id="reduce_input"  name="reduce"  th:value="${reduce}"  class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block ">
                        <p id="prepay_p" class="layui-font-red">需要补缴：￥[[${prepay}]]</p>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">补缴方式</label>
                    <div class="layui-input-block ">
                        <input type="radio" name="settledType" value="2" title="现金补缴" checked lay-filter="demo-radio-filter" >
                        <input type="radio" name="settledType" value="1" title="线上支付" lay-filter="demo-radio-filter" >

                    </div>
                </div>
                <div class="layui-form-item" id="payErw" style="display: none;">
                    <label class="layui-form-label ">收款码</label>
                    <div class="layui-input-block" style="padding-top: 10px">
                       <img th:if="${payErw}" th:src="${payErw}" style="width: 78px;height: 78px">
                       <p th:if="!${payErw}"> 请先在支付配置中上传静态收款码</p>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label ">补缴金额</label>
                    <div class="layui-input-block ">
                        <input type="text" id="prepay_input"  readonly name="prepay"  th:value="${prepay}"  class="layui-input layui-bg-gray layui-font-red">
                    </div>
                </div>
            </div>

        </div>
        <div class="text-center layui-form-actions1">
            <button class="layui-btn" type="submit">确认结算</button>
            <button class="layui-btn layui-btn-danger" data-close data-confirm="确定要确认结算吗？" type='button'>取消结算</button>
        </div>
    </form>

    <script>
        // document.getElementById('reduce_input').addEventListener('input', function(e) {
        //     console.log('实时值:', e.target.value); // 每次按键/粘贴都会触发
        // });
        document.getElementById('reduce_input').addEventListener('change', function(e) {
            let reduce = e.target.value;
            let increase = $('#increase_input').val();
            if(reduce > increase){
                layer.msg('结算金额不能大于预缴金额');
                e.target.value = increase;
            }else{
                $('#prepay_p').html('需要补缴：￥'+(increase-reduce))
                $('#prepay_input').val(increase-reduce)
            }
            console.log('最终值:', e.target.value); // 输入框失去焦点时触发
        });
        layui.use(function(){
            var form = layui.form;
            var layer = layui.layer;
            form.on('radio(demo-radio-filter)', function(data){
                var elem = data.elem; // 获得 radio 原始 DOM 对象
                var checked = elem.checked; // 获得 radio 选中状态
                var value = elem.value; // 获得 radio 值
                var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
                if(value == 1){
                    $('#payErw').show();
                }else{
                    $('#payErw').hide();
                }
               // layer.msg(['value: '+ value, 'checked: '+ checked].join('<br>'));
            });
        });
    </script>

</body>
</html>